<template>
  <d2-container>
   <template>
      <el-button v-if="shopId > 0" slot="header" type="primary" style="margin-bottom: 5px" @click="addChange">新 增</el-button>
      <el-table
          :data="tableData"
          stripe border
          row-key="id"
          style="width: 100%;">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="methodValue"
            label="口味名称">
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序号">
          </el-table-column>
          <el-table-column
            prop="categoryNames"
            label="关联分类">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间" :formatter="forDateCreate">
          </el-table-column>
          <el-table-column
            prop="reviseTime"
            label="修改时间" :formatter="forDateRevise">
          </el-table-column>
          <el-table-column
            fixed="right"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="warning" size="small" @click="updateRow(scope.row.id)">编辑</el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.row)"
                type="danger"
                size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
      </el-table> 
    </template>
    <template>
      <div>
          <keep-alive>
              <addPage :addPage="addComponent" @on-addPage-change="onAddPageChange" @on-loadlist-change="fetchData" ></addPage>
          </keep-alive>
      </div>
      <div>
          <keep-alive>
              <updatePage :updatePage="updateComponent" @on-updatePage-change="onUpdatePageChange" @on-loadlist-change="fetchData" :uId="updateId" @on-id-change="onIdChange"></updatePage>
          </keep-alive>
      </div>
    </template>
  </d2-container>
</template>

<script>
import { findProductTasteList, del } from '@api/restaurant/merchant/productTaste'
import addPage from './add'
import updatePage from './update'
import dayjs from 'dayjs'
import { mapState } from 'vuex'
export default {
  name: 'taste-index',
  components: {
    addPage,
    updatePage
  },
  data () {
    return {
      indexForm: {
        methodGroupNo : '11',
        methodValue: '',
        sort: ''
      },
      tableData: [],
      addComponent: false,
      updateComponent: false,
      updateId: ""
    }
  },
  mounted () {
    this.fetchData()
  },
  computed: {
	  ...mapState('d2admin/permission', ['shopId'])
  },
  methods: {
    /**双向绑定 start */
    addChange() {
     this.addComponent = !this.addComponent
    },
    onAddPageChange(val){
     this.addComponent=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    updateChange(){
      this.updateComponent=!this.updateComponent
    },
    onUpdatePageChange(val){
      this.updateComponent=val//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    idChange(val){
      this.updateId = val;
    },
    onIdChange(val){
      this.updateId = val//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    /**双向绑定 end */

    fetchData () {
      this.loading = true
      findProductTasteList({
        methodGroupNo: this.indexForm.methodGroupNo
      }).then(res => {
        this.tableData = res.data
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    deleteRow(row) {
      this.$confirm("确认删除" + row.methodValue + "？").then(_ => {
        this.loading = true
        del({
          id:row.id
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: "success" });
              this.fetchData();
              this.loading = false
            } else {
              this.$message({message: res.message, type:'error'});
              return;
            }
          })
          .catch(err => {
            console.log("err", err);
            this.loading = false;
          });
      });
    },
    updateRow(id){
      this.updateChange()
      this.idChange(id)
    },
    forDateCreate(row, column){
      return row.createTime==null?"":dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    forDateRevise(row, column){
      return row.reviseTime==null?"":dayjs(row.reviseTime).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
